<!--
 * @Author: hq
 * @Date: 2022-06-29 15:53:19
 * @LastEditors: hq
 * @LastEditTime: 2022-06-29 16:40:45
 * @Description: your project
 * @version: 1.0
-->
<template>
  <div>
    <div class="row">
      <div class="col">
        <div>代币名称：</div>
        <div>{{ rowData.token }}</div>
      </div>
      <div class="col">
        <div>记账分类：</div>
        <div>{{ rowData.class }}</div>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div>原始金额：</div>
        <div>{{ rowData.first }}</div>
      </div>
      <div class="col">
        <div>最后金额：</div>
        <div>{{ rowData.last }}</div>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div>实际金额(已入账)：</div>
        <div>{{ rowData.ramount }}</div>
      </div>
      <div class="col">
        <div>状态：</div>
        <div v-if="rowData.status === 0" class="red">待入帐</div>
        <div v-if="rowData.status === 1" class="green">已入账</div>
        <div v-if="rowData.status === 2">已驳回</div>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div>写入时间：</div>
        <div>{{ rowData.time }}</div>
      </div>
      <div class="col">
        <div>释放时间：</div>
        <div>{{ rowData.release }}</div>
      </div>
    </div>
    <div class="row">
      <div class="col1">
        <div>备注：</div>
        <el-table
          border
          :data="rowData.desc"
          :header-cell-style="{
            'text-align': 'center',
          }"
          :cell-style="{ 'text-align': 'center' }"
          style="width: 100%"
          highlight-current-row
        >
          <el-table-column prop="name" label="类型" min-width="30%">
          </el-table-column>
          <el-table-column prop="value" label="值" min-width="35%">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["rowData"],
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.row {
  display: flex;
  padding: 0 0 20px 20px;
  box-sizing: border-box;
  .col1 {
    width: 100%;
    div {
      margin-bottom: 10px;
    }
  }
  .col {
    width: 50%;
    display: flex;
    align-items: center;
    div:nth-child(1) {
      flex-shrink: 0;
    }
  }
}
</style>
